<template>
    <div id="app">
        <header v-if='$route.name != "Step"'>
            <span class="bill_text">{{ headerTitle }}</span>
            <span @click="historyBack" class="icons-fanhui"></span>
            <router-link to="/userInfo" id="personal-info" class="tuichu_icon"><img src="./assets/img/tongxunlu_icon.png"></router-link>
        </header>
        <div v-if="this.$store.state.isAlert" class="weui-mask weui-mask--visible"></div>
        <div v-if="this.$store.state.isAlert" class="weui-dialog weui-dialog--visible"><div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div><div class="weui-dialog__bd">{{this.$store.state.alertContent}}</div><div class="weui-dialog__ft"><a @click="hideAleart" href="javascript:;" class="weui-dialog__btn primary">确定</a></div></div>
        <div v-show="this.$store.state.isLoading" class="loading_img">
            <img src='./assets/img/ajax-loader.gif' />
        </div>
    <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'app',
    computed:{
        headerTitle:function(){
            return this.$store.state.headerTitle;
        },
        isAlert:function(){
            return this.$store.state.isAlert;
        }
    },
    methods:{
        hideAleart(){
            this.$store.state.isAlert = false;
        },
        historyBack(){
            history.back();
        }
    }
}
</script>

<style lang='scss' >
@import './assets/scss/faceMain.scss';

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.weui-flex.tap {
    .text-center {
        text-align: center;
        position: relative;
        line-height: 35px;
        font-size: 16px;
    }
    .weui-flex__item {
        position: relative;
        &:before {
            @include setBottomLine();
        }
    }
}
.checked-underline {
    &:before {
        @include setBottomLine(#0b84e0);
        width: 30%;
        margin: auto;
        border-bottom: 4px solid #0b84e0;
    }
}
>.weui-cells {
    margin-top: 0;
    &:before {
        border-width: 0px;
    }
}
.page__bd_spacing {
    padding: 10px 15px;
}

.loading_img {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    background-color: #000;
    z-index: 2;
    opacity: 0.6;
}
.loading_img img {
    display: block;
    margin: 300px auto;
}
.weui-cell__ft {
    text-align: right;
    color: #999999;
}
</style>
